<template>
	<view>
		<u-popup :show="show" @close="show = false" mode="center" round="20" :closeOnClickOverlay="false">
			<image class="cssUpdate_image"
				src="http://lbst.lubaoshengtai.com/profile/upload/2023/04/27/banbenshengji_20230427095302A004.png"
				mode="widthFix" />
			<view class="cssUpdate">
				<div class="cssUpdate_box">发现新版本</div>
				<view class="cssUpdate_content">
					<mp-html :content="detail" />
				</view>
				<view class="cssUpdate_download" v-if="percentage">
					<u-transition mode="fade-down" :show="true">
						<u-line-progress :percentage="percentage" activeColor="#ff0000"></u-line-progress>
					</u-transition>
				</view>
				<view class="flex items-center justify-between mt-20">
					<u-button text="取消" class="cssUpdate_button" style="background-color: #f8f8f8;color: #333;"
						@click="show = false"></u-button>
					<u-button :text="percentage == 0 ? '立即下载' : percentage == 100 ? '立即安装' : '文件下载中...'"
						class="cssUpdate_button" @click="submit(downloadResult)"></u-button>
				</view>

			</view>
		</u-popup>
	</view>
</template>
<script>
import {
	throttle
} from 'throttle-debounce';
var thro;
export default {
	data() {
		return {
			show: false,
			downloadResult: '', //下载文件
			percentage: 0, //文件下载进度
			detail: '',
			globalConfig: getApp().globalData.config
		}
	},
	mounted() {
		thro = this;

	},
	methods: {
		//获取版本
		updateVersion() {
			var that = this;
			let port = uni.getSystemInfoSync().platform
			console.log("🚀🚀🚀 ~ updateVersion ~ port:", port)
			switch (port) {
				case 'android':
					plus.runtime.getProperty(plus.runtime.appid, function (wgtinfo) {
						console.log("🚀🚀🚀 ~ wgtinfo:", wgtinfo)
						that.$Api.index.getNewVersion({
							isIos: 0
						}).then(res => {
							console.log(res, '获取新版本')
							var data = res.data;
							// 如果有新版本，则提示需要更新
							if (that.compareVersion(wgtinfo.version, data.versionNo)) {
								that.downloadResult = that.globalConfig.imagePrefix + data.url
								that.detail = data.sketch
								that.show = true
							} else {
								that.show = false
							}
						})
					});
					break;
				case 'ios':
					console.log('iOS'); //ios
					break;
				default:
					break;
			}
		},
		//版本对比
		compareVersion(ov, nv) { // ov为本地历史版本,nv为当前线上版本
			ov = ov.replace(/\./g, "");
			nv = nv.replace(/\./g, "");
			console.log(ov, 'ov', nv, 'nv')
			if (ov < nv) {
				return true;
			}
			return false;
		},
		//按钮操作
		submit: throttle(2000, (url) => {
			switch (thro.percentage) {
				case 0:
					//下载
					const downloadTask = uni.downloadFile({ //执行下载
						url: url,
						success: downloadResult => { //下载成功
							thro.downloadResult = downloadResult
						},
					});
					downloadTask.onProgressUpdate((res) => {
						thro.percentage = res.progress;
					})
					break
				case 100:
					// 安装
					plus.runtime.install( //安装
						thro.downloadResult.tempFilePath, {
						force: true
					},
						function (succ) {
							// 更新成功，重启中
							plus.runtime.restart();
						},
						function (e) {
							// 更新失败
							plus.nativeUI.toast('更新失败，退出重新更新APP')
						}
					);
					break
				default:
					uni.$u.toast('文件下载中...')
					break
			}
		}, {
			noTrailing: true
		}),
		/**
		 * 文件大小转换
		 * @param {*} size 文件大小（转换，必填）
		 * @param {*} pointLength  转换完，保留几位小数（选填，默认保存2位）
		 */
		formatSize(size, pointLength) {
			if (0 == size) return "0 B";
			var c = 1024,
				d = pointLength || 2,
				e = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
				f = Math.floor(Math.log(size) / Math.log(c));
			return parseFloat((size / Math.pow(c, f)).toFixed(d)) + " " + e[f];
		},
	},
}
</script>
<style scoped lang="scss">
$whiteColor: #ff0000;
$width: 80vw;

.cssUpdate_image {
	width: $width;
	margin-top: -40rpx;
}

.cssUpdate {
	width: $width;
	padding: 0 20rpx 20rpx 20rpx;

	.cssUpdate_box {
		font-size: 32rpx;
		font-weight: bold;
		color: rgb(122, 130, 153);
		text-align: center;
	}

	.cssUpdate_content {
		margin-top: 20rpx;
		max-height: 20vh;
		overflow: auto;
	}

	.cssUpdate_download {
		margin: 20rpx 0;

		.cssUpdate_download_t {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
		}
	}

	.cssUpdate_button {
		width: 40%;
		height: 80rpx;
		border-radius: 16rpx;
		border: none;
		color: #fff;
		background-color: $whiteColor;
	}
}
</style>